<template>
  <view class="user-page">
    <up-navbar title="" :bgColor="bgColor" height="50" fixed placeholder>
      <template #left>
        <text>书法展览</text>
      </template>
    </up-navbar>

    <view class="top-area">
      <view class="top-bg">
        <view class="user-row">
          <view class="avatar-container">
            <image class="avatar" :src="userInfo.avatarUrl" alt="avatar" @click.stop="handleAvatarClick" />
            <image v-if="isVip" class="crown-icon" src="../../static/user/crown.png" mode="aspectFit"></image>
          </view>
          <view class="user-name">{{ userInfo.isGuest ? '游客用户' : (userInfo.isLoggedIn ? userInfo.nickName : '点击头像登录') }}
          </view>
        </view>
        <view class="vip-wrap">
          <view class="vip-card">
            <!-- <view class="vip-inner"> -->
            <view class="vip-desc">VIP会员尊享权益 ››</view>
            <!-- </view> -->
            <view class="vip-bottom" @click="openVip">
              <view class="vip-exp">有效期至 {{ userInfo.vipExpire }}</view>
              <view class="btn-pay" @click.stop="openVip">去续费</view>
            </view>
          </view>
        </view>
      </view>
    </view>

    <view class="content">
      <view class="card">
        <view class="card-title">我的订单</view>
        <view class="order-icons">
          <view class="order-item">
            <image class="icon" src="../../static/user/icon-wait-pay.png" mode="aspectFit"></image>
            <view class="label">待付款</view>
          </view>
          <view class="order-item">
            <image class="icon" src="../../static/user/icon-paid.png" mode="aspectFit"></image>
            <view class="label">已付款</view>
          </view>
          <view class="order-item">
            <image class="icon" src="../../static/user/icon-refund.png" mode="aspectFit"></image>
            <view class="label">退款</view>
          </view>
        </view>
      </view>

      <view class="card">
        <view class="card-title">我的课程</view>
        <view class="course-row">
          <img class="course-thumb" :src="course.thumbnail" alt="thumb" />
          <view class="course-info">
            <view class="course-title">{{ course.title }}</view>
            <view class="course-meta">主讲人：{{ course.teacher }}</view>
          </view>
          <view class="btn-continue" @click="continueCourse">继续观看</view>
        </view>
      </view>

      <view class="card">
        <view class="card-title">其他服务</view>
        <view class="services-grid">
          <view class="service-item" v-for="(s, idx) in services" :key="idx" @click.stop="navigateTo(s)">
            <image class="svc-icon" :src="s.icon" mode="aspectFit"></image>
            <view class="svc-label">{{ s.label }}</view>
          </view>
        </view>
      </view>
    </view>

  </view>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import { onShow } from '@dcloudio/uni-app'
import { initTestData } from '@/utils/initData.js'
import { isLogin } from '@/utils/auth.js'

const bgColor = ref('#fff');
const userInfo = reactive({
  isLoggedIn: false, // 登录状态
  isGuest: false // 是否为游客模式
})

const course = ref({
  thumbnail: 'https://picsum.photos/80/80?random=6',
  title: '书法艺术赏析（第五讲）',
  teacher: '李娟老师'
})

const services = ref([
  { icon: '../../static/user/icon-collection.png', label: '我的收藏', path: '/pages/collect/list' },
  { icon: '../../static/user/icon-like.png', label: '我的点赞', path: '/pages/like/list' },
  { icon: '../../static/user/icon-review.png', label: '我的评论', path: '/gallery_pages/comment/list' },
  { icon: '../../static/user/icon-address.png', label: '收货地址', path: '/pages/user/address/list' },
  { icon: '../../static/user/icon-service.png', label: '客户服务', path: '/pages/user/service/index' },
  { icon: '../../static/user/icon-about.png', label: '关于我们', path: '/service_pages/about/index' }
])

// 获取用户信息
const getUserInfo = async () => {
  try {
    // 检查是否已登录
    if (isLogin()) {
      // 获取本地存储的用户信息（可能是游客模式）
      const storedUserInfo = uni.getStorageSync('userInfo')
      if (storedUserInfo) {
        Object.assign(userInfo, JSON.parse(storedUserInfo))
      }
    }
  } catch (error) {
    console.error('获取用户信息失败:', error)
  }
}

// 页面显示时获取用户信息
onMounted(() => {
  initTestData()
  // getUserInfo()
  getAppVersion()
})

// 添加 onShow 钩子，确保每次页面显示时都刷新用户信息
onShow(() => {
  getUserInfo()
})

// 处理头像点击 - 根据登录状态执行不同操作
const handleAvatarClick = () => {
  // 检查是否已登录
  if (!userInfo.isLoggedIn || userInfo.isGuest) {
    // 未登录或游客模式，显示提示框
    uni.showModal({
      title: '提示',
      content: '您尚未登录，是否前往登录？',
      confirmText: '去登录',
      cancelText: '取消',
      success: (res) => {
        if (res.confirm) {
          // 用户点击去登录，跳转到登录页面
          uni.navigateTo({
            url: '/pages/login/index',
            success: () => {
              console.log('跳转到登录页面成功')
            },
            fail: (err) => {
              console.error('跳转登录页面失败:', err)
              uni.showToast({
                title: '页面跳转失败',
                icon: 'none'
              })
            }
          })
        }
      }
    })
    return
  }

  // 已登录用户，跳转到个人信息页面
  uni.navigateTo({
    url: '/pages/user/profile',
    success: () => {
      console.log('跳转到个人信息页面成功')
    },
    fail: (err) => {
      console.error('跳转个人信息页面失败:', err)
      uni.showToast({
        title: '页面跳转失败',
        icon: 'none'
      })
    }
  })
}

// 获取应用版本号
const getAppVersion = () => {
  // #ifdef MP-WEIXIN
  const accountInfo = uni.getAccountInfoSync()
  if (accountInfo && accountInfo.miniProgram && accountInfo.miniProgram.version) {
    appVersion.value = accountInfo.miniProgram.version
  }
  // #endif
}

// 打开VIP会员页面
const openVip = () => {
  // 这里可以添加跳转到VIP页面的逻辑
  console.log('打开VIP页面')
  // 示例：uni.navigateTo({ url: '/pages/vip/index' })
}

// 继续观看课程
const continueCourse = () => {
  // 这里可以添加继续观看课程的逻辑
  console.log('继续观看课程')
  // 示例：uni.navigateTo({ url: '/pages/course/video' })
}

const navigateTo = (item) => {
  // 否则使用路径导航
  if (item.path) {
    uni.navigateTo({
      url: item.path,
      fail: () => {
        uni.showToast({
          title: '页面开发中',
          icon: 'none'
        })
      }
    })
  }
}
</script>

<style scoped>
.user-page {
  min-height: 100vh;
  background-color: #f8f8f8;
}

.top-area .top-bg {
  background: linear-gradient(90deg, #eaf2ff, #ffeef7);
  padding: 10rpx 10rpx 0rpx;
}

.user-row {
  display: flex;
  align-items: center;
  gap: 24rpx;
  margin-bottom: 24rpx;
}

.avatar-container {
  position: relative;
  display: inline-block;
}

.avatar {
  width: 128rpx;
  height: 128rpx;
  border-radius: 50%;
  object-fit: cover;
  border: 6rpx solid rgba(255, 255, 255, 0.6)
}

.crown-icon {
  position: absolute;
  top: -15rpx;
  right: -15rpx;
  width: 50rpx;
  height: 50rpx;
  z-index: 10;
}

.user-name {
  font-size: 36rpx;
  font-weight: 600;
  color: #222;
}

.user-name .arrow {
  color: #999;
  margin-left: 12rpx
}

/* VIP 卡片组合 */
.vip-wrap {
  background-image: url(../../static/user/vip-card-bg.png);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  margin-top: 8rpx;
  position: relative;
  padding-top: 8rpx;
  border-radius: 18rpx;
  overflow: hidden;
  min-height: 360rpx;
  /* 确保卡片有最小高度 */
}

.vip-card {
  padding: 28rpx;
  display: flex;
  flex-direction: column;
  gap: 30rpx;
  position: relative;
  min-height: 300rpx;
}

.vip-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
  margin-bottom: 10rpx;
}

.vip-desc {
  color: rgba(249, 225, 169, 0.9);
  font-size: 26rpx;
  padding: 18rpx 22rpx;
  position: absolute;
  left: 28rpx;
  top: 50%;
  transform: translateY(-50%);
}

/* 卡片下方波浪且显示有效期 + 操作 */
.vip-bottom {
  margin-top: auto;
  padding: 0rpx 22rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-shadow: 0 10rpx 30rpx rgba(34, 40, 58, 0.12);
  overflow: hidden;
}

.vip-exp {
  color: rgba(249, 225, 169, 0.9);
  font-size: 26rpx;
}

.btn-pay {
  background: linear-gradient(180deg, #fff1db, #ffdba8);
  color: #8a4a00;
  padding: 12rpx 28rpx;
  border-radius: 18rpx;
  font-weight: 700;
}

.content {
  padding: 24rpx 10rpx;
  display: flex;
  flex-direction: column;
  gap: 24rpx;
}

.card {
  background: #fff;
  border-radius: 24rpx;
  padding: 28rpx
}

.card-title {
  font-size: 32rpx;
  margin: 0 0 20rpx;
  color: #333
}

.order-icons {
  display: flex;
  justify-content: space-around;
  padding: 12rpx 0
}

.order-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12rpx;
  color: #666
}

.order-item .icon {
  width: 112rpx;
  height: 112rpx;
  border-radius: 56rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 40rpx
}

.order-item .label {
  font-size: 28rpx;
}

.course-row {
  display: flex;
  align-items: center;
  gap: 24rpx
}

.course-thumb {
  width: 144rpx;
  height: 144rpx;
  object-fit: cover;
  border-radius: 16rpx
}

.course-info {
  flex: 1
}

.course-title {
  font-weight: 600;
  color: #222;
  margin-bottom: 12rpx
}

.course-meta {
  color: #666;
  font-size: 24rpx;
}

.btn-continue {
  background: linear-gradient(180deg, #ff8a1a, #ff6b00);
  color: #fff;
  padding: 12rpx 22rpx;
  border-radius: 32rpx;
  font-weight: 700;
  align-self: center;
}

.services-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24rpx;
  padding-top: 12rpx
}

.service-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12rpx;
  color: #666
}

.svc-icon {
  width: 60rpx;
  height: 60rpx;
  border-radius: 48rpx;
  background: linear-gradient(180deg, #fff, #fff0eb);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.04);
}

.svc-icon image {
  width: 50rpx;
  height: 50rpx;
}

.svc-label {
  font-size: 28rpx;
}

@media (max-width:840rpx) {
  .avatar {
    width: 112rpx;
    height: 112rpx
  }

  .user-name {
    font-size: 32rpx
  }
}
</style>